<template>
  <div>
    <div style="background-color: rgb(254,216,2);">
      <div class="regNav">
        <div class="register">
          <span class="regNavLogo">闲呗</span>
          <span class="regNavText">让你的闲置游起来</span>
        </div>
        <div class="regis">
          <div><img src="../assets/扬声器.png" class="regNavImg" /></div>
          <div class="regNavText1">请下载手机版闲鱼,买卖闲置更便捷</div>
        </div>
      </div>
    </div>
    <div class="regBackground">
      <div style="position: absolute;left: 67%;top: 31%;background-color: white;">
        <div style="width: 80%;margin: 0 auto;">
          <van-cell-group style="margin-top: 15px;">
            <van-field v-model="acc" id="acc" required label="手机号" maxlength="11" placeholder="请输入手机号"
              autocomplete="off" v-on:blur="useracc" :error-message='telErr' />
            <van-field v-model="pwd" id="pwd" type="password" required label="密码" placeholder="请输入密码" v-on:blur="userpwd"
              :error-message="pwdErr"/>
            <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入验证码">
              <template #button>
                <van-button size="small" type="primary" :disabled="disabled" @click="sendcode">{{codeBtn}}</van-button>
              </template>
            </van-field>
            <p href="" id="regis"><a @click="goLogin">已有账号，前往登录</a></p>
            <van-button type="primary" size="large" @click="register" id="registerBtn">注册</van-button>
          </van-cell-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      acc: '',// userTel账号
      pwd: '', // 密码
      telErr: '', // 账号失焦提示
      pwdErr: '', // 密码失焦提示
      sms:'', // 验证码
      codeBtn:'发送验证码', // 验证码按钮的内容
      codesuccess:'', // 验证码发送成功的状态
      disabled:false // 是否禁用按钮
    }
  },
  methods: {
    useracc() {
      if (this.acc == '') {
        this.telErr = '输入账号为空'
      } else {
        this.telErr = ''
      }
    },
    userpwd() {
      if (this.pwd == '') {
        this.pwdErr = '输入密码为空'
      } else {
        this.pwdErr = ''
      }
    },
    // 发送验证码的事件
    sendcode() {
      var acc = this.acc;// 账号
      var pwd = this.pwd //密码
      if (acc == '') {
        alert('手机号码不能为空')
      }else if(pwd == ''){
        alert('密码不能为空')
      } else {
        this.$axios.get('api/userTable/getyzm', {
          params: {
            phone: this.acc,
            code:this.sms
          }
        })
          .then(resp => {
            if (resp.data.code == 200) {
              alert('验证码已发送.请注意接收')
              this.disabled = true
              this.codesuccess =true
            }
          }).catch(err => {
            console.log(err, 172)
            this.codesuccess = false
          })
      }
    },
    // 前往登录的事件
    goLogin(){
      this.$router.push({name:'Login'})
    },
    // 注册的事件
    register() {
      let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/
      let pwdReg = /^[0-9]{6}$/
      if (this.acc == '') {
        alert('输入账号为空')
      } else if (this.pwd == '') {
        alert('输入密码为空')
      } else if (!reg.test(this.acc)) {
        alert('手机号格式错误')
      } else if (!pwdReg.test(this.pwd)) {
        alert('密码格式错误')
      }else if(this.sms == ''){
        alert('验证码为空')
      } else {
        this.$axios.post('api/userTable/post',
          this.$qs.stringify({
            acc: this.acc,
            pwd: this.pwd,
          }))
          .then(resp => {
            if (this.codesuccess == true){
              alert(resp.data.msg)
              sessionStorage.setItem('userTel',this.acc)
              this.$router.push({name:'Login'})
            }
          }).catch(err => {
            console.log(err)
          })
      }

    }
  },
}
</script>

<style scoped>
.regNav {
  height: 8vh;
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(254, 216, 2);
  box-shadow: 0px 0px 0px #2999;
}

.regNavLogo {
  font-size: 40px;
}

.register {
  margin-left: 100px;
  float: left;
  color: black;
}

.regBackground {
  height: 92vh;
  background-image: url("../assets/TB1FywYtUT1gK0jSZFrXXcNCXXa-970-763.png");
  background-repeat: no-repeat;
  background-color: rgb(255, 233, 36);
}

.regis {
  display: flex;
  align-items: center;

}

.regNavImg {
  width: 20px;
  height: 20px;
}

#registerBtn {
  width: 80%;
  display: flex;
  margin: 0 auto;
  height: 36px;
  border-radius: 10px;
  margin-bottom: 30px;
  margin-top: 15px;
  justify-content: center;
}

#regis {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-right: 20px;
  font-size: 12px;
  text-align: right;
  
}
#regis a{
  cursor: pointer;
}

#pwd {
  margin-top: 15px;
  margin-bottom: 15px;
}

.regNavText {
  margin-left: 30px;
}

.regNavText1 {
  margin-left: 10px;
}
</style>